<template>
  <div class="container">
    <div class="acatar">
      <el-row :gutter="10" style="display: flex; align-items: center; width: 850px;margin-left: 20px;">
        <el-col :span="16">
          <el-col :span="10">
            <el-cascader placeholder="请选择课程/作业信息" v-model="course_assignment_value" :options="course_assignment_list"
              @change="handleChange"></el-cascader>
          </el-col>
        </el-col>
      </el-row>
      <UserAcatar @transfer="change" />
    </div>
    <div
      v-if="!hasTask"
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 70vh;
      "
    >
      <span>暂时没有作业要批阅，休息一下吧</span>
      <img src="" alt="" />
    </div>
    <div class="main" v-if="hasTask">
      <div class="outer-weapper" style="display: flex; flex-direction: column">
        <el-tabs v-model="activeName" @tab-click="changeStatus">
          <el-tab-pane label="已批阅" name="corrected">
            <div class="table-wrapper">
              <el-table
                v-loading="listLoading"
                :data="students"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
              >
                <el-table-column align="center" label="头像" width="80">
                  <template slot-scope="scope">
                    <el-avatar
                      :size="50"
                      :src="
                        scope.row.avatar
                          ? `http://localhost:3000/image/getavatar/${scope.row.avatar}`
                          : circleUrl
                      "
                    ></el-avatar>
                  </template>
                </el-table-column>

                <el-table-column width="180px" align="center" label="姓名">
                  <template slot-scope="scope">
                    <span>{{ scope.row.student_name }}</span>
                  </template>
                </el-table-column>

                <el-table-column width="120px" align="center" label="学号">
                  <template slot-scope="scope">
                    <span>{{ scope.row.student_id }}</span>
                  </template>
                </el-table-column>

                <el-table-column width="180px" align="center" label="被批改者姓名">
                  <template slot-scope="scope">
                    <span>{{ scope.row.corrected_name }}</span>
                  </template>
                </el-table-column>

                <el-table-column width="120px" align="center" label="批阅状态">
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status == 'reviewed' ? "已批阅" : "未批阅" }}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column width="120px" align="center" label="分数">
                  <template slot-scope="scope">
                    <span v-if="scope.row.score" style="color: #FED71A">{{scope.row.score}}/</span><span style="color: #12aa9c">{{scope.row.total_points}}</span><span style="color:#12aa9c; font-size: 12px">分</span>
                  </template>
                </el-table-column>

                <el-table-column width="120px" align="center" label="是否采纳">
                  <template slot-scope="scope">
                    <el-tag :type="isadopt(scope.row.isadopt) | statusFilter" >{{isadopt(scope.row.isadopt)}}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column
                  class-name="status-col"
                  label="批阅时间"
                  width="200"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag
                      
                    >
                      {{ scope.row.correct_time }}
                    </el-tag>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  label="操作"
                  align="center"
                  width="100"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="{ row }">
                    <el-button v-if="row.correction_status === 'false'" type="success" size="mini" @click="correct(row)"
                      >审核</el-button
                    >
                    <el-button v-if="row.correction_status === 'true'" type="success" size="mini" @click="correct(row)"
                      >修改审核</el-button
                    >
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="未批阅" name="uncorrect">
            <div class="table-wrapper">
              <el-table
                v-loading="listLoading"
                :data="students"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
              >
                <el-table-column align="center" label="头像" width="80">
                  <template slot-scope="scope">
                    <el-avatar
                      :size="50"
                      :src="
                        scope.row.avatar
                          ? `http://localhost:3000/image/getavatar/${scope.row.avatar}`
                          : circleUrl
                      "
                    ></el-avatar>
                  </template>
                </el-table-column>

                <el-table-column width="180px" align="center" label="姓名">
                  <template slot-scope="scope">
                    <span>{{ scope.row.student_name }}</span>
                  </template>
                </el-table-column>

                <el-table-column width="120px" align="center" label="学号">
                  <template slot-scope="scope">
                    <span>{{ scope.row.student_id }}</span>
                  </template>
                </el-table-column>

                <el-table-column width="180px" align="center" label="被批改者姓名">
                  <template slot-scope="scope">
                    <span>{{ scope.row.corrected_name }}</span>
                  </template>
                </el-table-column>


                <el-table-column width="120px" align="center" label="是否采纳">
                  <template slot-scope="scope">
                    <el-tag :type="isadopt(scope.row.isadopt) | statusFilter" >{{isadopt(scope.row.isadopt)}}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="page">
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
        :pageSizes="[10]" @pagination="pageChange" />
    </div>
  </div>
</template>

<script>
import UserAcatar from "@/components/UserAcatar.vue";
import Pagination from "@/components/Pagination";
export default {
  name: "corrent",
  components: {
    UserAcatar,
    Pagination,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        unpublish: "danger",
        'true': "success",
        'false': "danger",
        'reviewed': 'success',
        '未采纳': "danger",
        '已采纳': 'success'
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      activeName: "corrected",
      students: [],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      course_assignment_list: [],
      // tasks: ["作业1", "作业2", "作业3", "作业4", "作业5"],
      // keyword: "",
      course_assignment_value: [],
      task: "",
      hasTask: false,
      userInfo: "",
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  mounted() {
  },
  methods: {
    isadopt(adopt) {
        if(adopt == 'true') {
            return "已采纳"
        } else {
            return "未采纳"
        }
    },
    async changeStatus() {
      console.log(this.activeName);
      if(this.activeName == 'unpublish') {
        console.log(this.students);
      }
      await this.getAllSubmit();
    },
    handleClick(row) {
      console.log(row);
      this.$router.push({ name: "Cabbage", query: { row } });
    },
    // 跳转页面
    async pageChange(item) {
      await this.getAllSubmit(this.course_assignment_value[2], item);
    },
    // 跳转到教师批改界面
    correct(row) {
      console.log(row);
      // 有assignment_id 、student_id 可以确定学生的提交记录， 可以确定多份批改信息，然后存在
      // 将学生提交的题目调出来，还有学生的批改记录
      let obj = {};
      obj.student_id = row.student_id;
      obj.assignment_id = row.assignment_id;
      obj.auth = "teacher_per";
      obj.status = "publish";
      obj.student_assignment_id = row.student_assignment_id;
      console.log(obj.student_assignment_id);
      this.$router.push({ name: "Cabbage", query: { ...obj } });
    },
    async getAllSubmit(assignmentId, pagechange) {
      this.listLoading = true;
      console.log(pagechange);
      let res;
      if (pagechange) {
        console.log("执行了方法");
        res = await this.$axios.post(
          "/correct/getStudentCorrection",
          {
            assignmentId,
            activeName: this.activeName
          },
          { params: pagechange }
        );
      } else {
        res = await this.$axios.post(
          "/correct/getStudentCorrection",
          {
            assignmentId: this.course_assignment_value[2],
            activeName: this.activeName
          },
          { params: this.listQuery }
        );
      }
      console.log(res);
      if (res.code === 200) {
        this.listLoading = false;
      }
      this.students = res.infoList;
      this.total = res.total;
    },
    async handleChange() {
      await this.getAllSubmit();
    },
    findWork() { },
    changePage() { },
    async getCourse() {
      let res = await this.$axios.post("/correct/getTeacherCourse", {
        teacher_id: this.userInfo.teacher_id,
      });
      console.log(res);
      this.course_assignment_list = res.infoList;
    },
    gotoTargetPage() {
      this.$router.push({ name: "Cabbage" });
    },
    change(msg) {
      this.$emit("transfer", msg);
    },
    handleCommand(command) {
      this.course = command;
    },
    handleWork(command) {
      this.task = command;
    },
  },
  async created() {
    this.userInfo = {
      ...JSON.parse(JSON.stringify(this.$store.state.user_info)),
    };
    console.log(this.userInfo);
    await this.getCourse();
    this.course_assignment_value[0] = this.course_assignment_list[0].value;
    this.course_assignment_value[1] =
      this.course_assignment_list[0].children[0].value;
    this.course_assignment_value[2] =
      this.course_assignment_list[0].children[0].children[0].value;
    console.log(this.course_assignment_value);
    if (this.course_assignment_value[2]) {
      console.log("执行");
      this.hasTask = true;
      await this.getAllSubmit();
    } else {
      this.hasTask = false;
    }
  },
};
</script>
<style scoped>

.page {
  width: 100%;
  display: flex;
  justify-content: center;
}


.table-wrapper {
  flex-grow: 1;
  margin-left: 40px;
  /* width: 70%; */
  float: left;
  margin: auto;
}

.page {
  margin-top: 20px;
}


.acatar {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #bbb;
}

.main {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>